<template>
  <div class="app" :class="{bg: showBg}">
    <Video v-if='isShowVideo'></Video>
    <Nav @handleVideo='handleVideo'/>
    <router-view></router-view>
  </div>
</template>

<script>
import Video from "@/components/Video";
import Nav from '@/components/Nav'
import Detail from '@/views/Detail'
export default {
  name: "App",
  data() {
    return {
      isShowVideo: true,
      showBg: false
    }
  },
  components: {
    Video,
    Nav,
    Detail
  },
  mounted() {
    if (window.location.hash.slice(1) === '/view') {
      this.isShowVideo = false;
      this.showBg = true;
    } else {
      this.showBg = false;
      this.isShowVideo = true;
    }
    this.$on('main', () => {
      this.isShowVideo = true;
      this.showBg = false;
    })
    this.$on('view', () => {
      this.isShowVideo = false;
      this.showBg = true;
    })
  },
  methods: {
    handleVideo() {
      this.isShowVideo = false;
      this.showBg = true;
    }
  },
};
</script>

<style lang='scss' scoped>
  .bg {
    background: url('../assets/image/bg.png') no-repeat top left / 100% 100%;
  }

  .app {
    height: 100%;
  }

</style>